<template>
  <div class="circle-group">
    <div class="top">
      <div :class="['top__title', { active: index == currentCirCleIndex }]">
        {{ circleGroup.groupName }}
      </div>
      <div
        class="top__controller"
        v-show="!isShowMore"
        @click="isShowMore = !isShowMore"
      >
        <span>展开</span
        ><img
          src="../../assets/images/icons/icon_arrow_down_grey.png"
          class="top__controller-img"
          alt=""
        />
      </div>
      <div
        class="top__controller"
        v-show="isShowMore"
        @click="isShowMore = !isShowMore"
      >
        <span>收起</span
        ><img
          src="../../assets/images/icons/icon_arrow_up_grey.png"
          class="top__controller-img"
          alt=""
        />
      </div>
    </div>
    <div class="content">
      <ul class="list">
        <li
          class="list-node"
          v-for="(circle, index) in showGroupList"
          :key="index"
        >
          <img :src="circle.pic" alt="" class="list-node__pic" />
          <div class="list-node__info">
            <p class="list-node-name">
              {{ circle.name }}
            </p>
            <div class="list-node__detail">
              <span class="list-node__detail-node">{{
                '讨论' + circle.movement
              }}</span>
              <span class="list-node__detail-node">{{
                '成员' + circle.attentions
              }}</span>
            </div>
            <div class="list-node__tag" v-if="circle.isOffical">
              <img
                src="../../assets/images/icons/icon_news.png"
                alt="官方入住"
                class="list-node__tag-img"
              />
              <span class="list-node__tag-innerText">官方入住</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    minNum: {
      type: Number,
      default: 4,
    },
    maxNum: {
      type: Number,
      default: 20,
    },
    circleGroup: {
      type: Object,
      default: () => {
        return {
          groupName: '柔派',
          list: [
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
            {
              pic:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
              name: '柔派圈子',
              movement: '47984',
              attentions: '9090',
              isOffical: true,
            },
          ],
        }
      },
    },
    index: {
      type: Number,
      default: '',
    },
    currentCirCleIndex: {
      type: Number,
      default: '',
    },
  },
  name: 'CircleGroup',
  data() {
    return {
      isShowMore: false,
    }
  },
  watch: {},
  computed: {
    showGroupList() {
      return this.isShowMore
        ? this.circleGroup.list.slice(0, this.maxNum)
        : this.circleGroup.list.slice(0, this.minNum)
    },
  },
  methods: {},
  created() {},
  mounted() {},
}
</script>
<style lang="scss" scoped>
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 24px;
}
.top__title {
  font-size: 16px;
  font-weight: 500;
}

.top__controller {
  color: $color-font-grey;
  display: flex;
  align-items: center;
}
.top__controller-img {
  margin-left: 8px;
  width: 20px;
}
.list {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.list-node {
  width: 362px;
  height: 108px;
  display: flex;
  align-items: center;
  padding-left: 19px;
  margin-bottom: 12px;
  background: rgba($color: #000000, $alpha: 0.03);
  border-radius: 16px;
}
.list .list-node:nth-last-child(2) {
  margin-bottom: 0;
}
.list .list-node:last-child {
  margin-bottom: 0;
}

.list-node__pic {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  margin-right: 16px;
}
.list-node-name {
  font-size: 16px;
  line-height: 24px;
  padding-bottom: 4px;
}
.list-node__detail-node {
  padding-right: 16px;
  padding-bottom: 8px;
  line-height: 20px;
  color: $color-font-grey;
}
.list-node__tag {
  display: flex;
  align-items: center;
}

.list-node__tag-img {
  width: 18px;
}
.list-node__tag-innerText {
  line-height: 20px;
  color: $color-font-grey;
}
.active {
  color: $color-royole;
}
</style>
